import { Space, Image as AntdImage } from "antd";
import { Card as SemiCard, Row, Col, Descriptions as SemiDescriptions } from "@douyinfe/semi-ui";
import { useModel } from "umi";
import { useReactive } from "ahooks";
import Jdenticon from "react-jdenticon";
import dayjs from "dayjs";
import { useEffect } from "react";

import { PersonBaseInformationByUuid } from "../../_graphql/persons";

const OrganizationInformation = () => {
    const { windowInnerHeight, UTCTimeToLocal, graphqlFetchPlatform } = useModel("global");
    const { kuboUrl } = useModel("kubo");
    const { currentPerson } = useModel("person.info");

    const state = useReactive({
        loading: false,
        baseInfo: {},
    });

    const loadOrganizationBaseInfo = async () => {
        let res = await graphqlFetchPlatform({ query: PersonBaseInformationByUuid, variables: { uuid: currentPerson } });
        state.baseInfo = res?.a || {};
    };

    useEffect(() => {
        currentPerson && loadOrganizationBaseInfo();
    }, [currentPerson]);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 60 - 54 - 2;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>基本信息</span>}
                headerExtraContent={<Space style={{ lineHeight: "32px", fontSize: 14, fontWeight: 600 }}></Space>}
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                size="default"
                bodyStyle={{ padding: 20, height: cardBodyHeight }}
            >
                {state.baseInfo.uuid ? (
                    <Row gutter={24}>
                        <Col span={3}>
                            <Space direction="vertical">
                                <div style={styles.avatarView}>
                                    {state.baseInfo?.avatarHash ? (
                                        <AntdImage
                                            width={110}
                                            height={110}
                                            preview={false}
                                            src={kuboUrl && state.baseInfo?.avatarHash ? kuboUrl + state.baseInfo.avatarHash : ""}
                                        />
                                    ) : (
                                        <Jdenticon size="110" value={state.baseInfo?.realName || ""} />
                                    )}
                                </div>
                            </Space>
                        </Col>
                        <Col span={14}>
                            {state.baseInfo.uuid && (
                                <SemiDescriptions>
                                    <SemiDescriptions.Item itemKey="个人UUID">{state.baseInfo.uuid}</SemiDescriptions.Item>
                                    <SemiDescriptions.Item itemKey="真实姓名">
                                        {state.baseInfo?.realName}{" "}
                                        {state.baseInfo?.realNameVerification !== true ? (
                                            <span style={{ marginLeft: 10 }}>
                                                (<span style={{ color: "red" }}>未实名认证</span>)
                                            </span>
                                        ) : (
                                            <span style={{ marginLeft: 10 }}>
                                                (<span style={{ color: "blue" }}>已实名认证</span>)
                                            </span>
                                        )}
                                    </SemiDescriptions.Item>
                                    <SemiDescriptions.Item itemKey="呢称别名">{state.baseInfo?.nickName}</SemiDescriptions.Item>
                                    <SemiDescriptions.Item itemKey="英文名称">{state.baseInfo?.englishName}</SemiDescriptions.Item>
                                    <SemiDescriptions.Item itemKey="性别">{state.baseInfo?.sex}</SemiDescriptions.Item>
                                    <SemiDescriptions.Item itemKey="民族">{state.baseInfo?.nation}</SemiDescriptions.Item>
                                    <SemiDescriptions.Item itemKey="生日">
                                        {state.baseInfo?.birthday ? dayjs(state.baseInfo?.birthday).format("YYYY年MM月DD日") : ""}
                                    </SemiDescriptions.Item>
                                    <SemiDescriptions.Item itemKey="当前所在地">{state.baseInfo?.currentResidentialAddress}</SemiDescriptions.Item>
                                    <SemiDescriptions.Item itemKey="个性签名">{state.baseInfo?.personalSignature}</SemiDescriptions.Item>
                                    <SemiDescriptions.Item itemKey="创建时间">
                                        {state.baseInfo?.createdTime ? UTCTimeToLocal(state.baseInfo.createdTime, "YYYY-MM-DD HH:mm:ss") : ""}
                                    </SemiDescriptions.Item>
                                    <SemiDescriptions.Item itemKey="更新时间">
                                        {state.baseInfo?.updatedTime ? UTCTimeToLocal(state.baseInfo.updatedTime, "YYYY-MM-DD HH:mm:ss") : ""}
                                    </SemiDescriptions.Item>
                                </SemiDescriptions>
                            )}
                        </Col>
                    </Row>
                ) : (
                    ""
                )}
            </SemiCard>
        </div>
    );
};

const styles = {
    avatarView: {
        display: "inline-block",
        width: 120,
        height: 120,
        margin: 0,
        padding: 4,
        border: "1px solid #d9d9d9",
        borderRadius: 2,
    },
};

export default OrganizationInformation;
